<template>
   <div>
       <el-header class="header-wrapper">
           <div class="logo">
               <img src="../../assets/image/logo.png">
           </div>
           <div class="logoText">
               <img src="../../assets/image/logot1.png">
           </div>
           <div class="menu">
               <el-menu :default-active="$route.path" mode="horizontal" @select="handleSelect" router
                        background-color="rgb(22,22,22)" text-color="rgb(256,256,256,0.5)"  active-text-color="#f599ae">
                   <el-submenu index="2">
                       <template slot="title">订单管理</template>
                       <el-menu-item index="/saler/order/new">新订单</el-menu-item>
                       <el-menu-item index="/saler/order/doing">已发货订单</el-menu-item>
                       <el-menu-item index="/saler/order/done">已收货订单</el-menu-item>
                   </el-submenu>
                   <el-menu-item index="/saler/product/published">商品管理</el-menu-item>
                   <el-menu-item index="/saler/massage/massage">消息中心</el-menu-item>
                   <el-submenu index="5">
                       <template slot="title">个人中心</template>
                       <el-menu-item index="/saler/information/info">信息管理</el-menu-item>
                       <el-menu-item @click="exit()">退出</el-menu-item>
                   </el-submenu>
               </el-menu>
           </div>
       </el-header>
   </div>
</template>

<script>
    export default {
        name: "cliTitleSaler",
        methods: {
            /**
             * @description: 单击退出按钮触发该方法
             * @param {无 }
             * @return:跳转至登陆页面
             */
            exit () {
                this.$confirm('确认退出吗?', '提示', {
                }).then(() => {
                    this.$router.push('/')
                    // this.$store.commit('log_out') // 退出清空sessionStorage
                }).catch(() => { })
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>
    .header-wrapper {
        width: 100%;
        height: 20%;
        background-color: rgb(22, 22, 22);
        font-size: 20px;
        position: fixed;
        overflow-y: hidden;
        z-index: 2;
    }
    .logo {
        float: left;
        margin-top: 5px;
    }
    .logoText {
        float: left;
        margin-top: 10px;
    }
    .menu{
        float: right;
        margin-top: 0px;
        margin-right: 0px;
    }
</style>
